<script type="text/javascript">//<![CDATA[
	XHR.poll(2, '<%=luci.dispatcher.build_url("admin", "mtk", "hwnat_binding_status")%>', null,
		function(x, st) {
			var tb = document.getElementById('binding_entries');

			if (st && tb) {
				/* clear all rows */
				while( tb.rows.length > 1 )
					tb.deleteRow(1);

				for( var i = 0; i < st.length; i++ ) {
					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);

					tr.insertCell(-1).innerHTML = i + 1;
					tr.insertCell(-1).innerHTML = st[i].type_;
					tr.insertCell(-1).innerHTML = st[i].foe_entry;
					tr.insertCell(-1).innerHTML = st[i].src_info;
					tr.insertCell(-1).innerHTML = st[i].new_info;
				}

				if( tb.rows.length == 1 ) {
					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row';

					var td = tr.insertCell(-1);
						td.colSpan = 5;
						td.innerHTML = '<em><br /><%:There are no active traffic.%></em>';
				}
			}
		}
	);
//]]></script>

<fieldset class="cbi-section">
	<p> <br> <strong style="color: red;">Warning</strong>:
         Web UI (espcially auto-refresh) will decrease the performance significantly. You'd better close Web UI before any performance/throughout test.</p>
</fieldset>

<fieldset class="cbi-section">
	<legend><%:Active Binding Status%></legend>
	<table class="cbi-section-table" id="binding_entries">
		<tr class="cbi-section-table-titles">
			<th class="cbi-section-table-cell"><%:No.%></th>
			<th class="cbi-section-table-cell"><%:Type%></th>
			<th class="cbi-section-table-cell"><%:FOE Entry%></th>
			<th class="cbi-section-table-cell"><%:Traffic before NAT%></th>
			<th class="cbi-section-table-cell"><%:Traffic after NAT%></th>
		</tr>
		<tr class="cbi-section-table-row">
			<td colspan="5"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</fieldset>


